<template>
  <div class="app-container">
    <div class="filter-container">
      <!-- :select-params="[{label:'进行中',value: 1},{label:'未开始',value: 2},{label:'已结束',value: 3}]" -->
      <!--      <span class="filter-title filter-item">操作时间</span>
      <k-date-picker
        v-model="timeValue"
        class="filter-item"
      /> -->
      <k-button class="top-btn" value="短信接收人" @click.native="setUrgentShow" />
      <k-input
        v-model.trim="listQuery.nickName"
        class="filter-item"
        is-search
        placeholder="请输入用户名"
        :search-fun="handleFilter"
        @keyup.enter.native="handleFilter"
      />
    </div>
    <!--表格相关 -->
    <el-table
      :data="tableData"
      fit
      border
      highlight-current-row
      style="width: 100%; border-radius: 8px; margin-top: 20px;"
      :header-cell-style="{ background: '#F6F5FA', color: '#4E4F62' }"
    >
      <!-- <el-table-column min-width="60px" type="selection" align="center" /> -->
      <el-table-column width="60px" type="index" label="序号" align="center" />
      <el-table-column prop="userName" min-width="150px" label="昵称" align="center" />
      <el-table-column prop="loginMsg" min-width="150px" label="登录结果" align="center" />
      <el-table-column prop="createTime" min-width="200px" label="登录时间" align="center" />
      <el-table-column prop="ip" min-width="150px" label="ip" align="center" />
    </el-table>
    <pagination
      v-show="totalRows > 0"
      :total="totalRows"
      :page.sync="listQuery.pager.pageNo"
      :limit.sync="listQuery.pager.pageSize"
      @pagination="loadData"
    />
    <k-dialog
      :show-hide.sync="urgentShow"
      :modal-append-to-body="false"
      :append-to-body="true"
      title="短信接收人"
      :show-foot="false"
      :two-btn="true"
      @click="saveMobileList"
    >
      <div class="warning_div">
        <el-form label-width="auto" :inline="true">
          <div v-for="(item,index) in mobileList" :key="index">
            <el-form-item label="姓名：">
              <el-input v-model="item.name" placeholder="姓名" />
            </el-form-item>

            <el-form-item label="手机号：">
              <el-input v-model="item.mobile" placeholder="请输入手机号码" />
            </el-form-item>
            <el-form-item>
              <i v-show="index > 0" class="el-icon-circle-close" style="cursor: pointer;" @click="deleteItem(index)" />
              <i
                v-show="index == mobileList.length - 1"
                class="el-icon-circle-plus-outline"
                style="margin-left: 5px; color: #08c81b; cursor: pointer;"
                @click="addItem()"
              />
            </el-form-item>
          </div>

        </el-form>
      </div>
    </k-dialog>
  </div>
  <!-- 紧急联系人 弹窗 -->

</template>

<script>
import { listAdminLoginRecordData, getAllopatricMobileCode, setAllopatricMobileCode } from '@/api/settings/settings'
import Pagination from '@/components/Pagination'

export default {
  components: { Pagination },
  data() {
    return {
      tableData: [],
      totalRows: 0,
      listQuery: {
        pager: {
          pageNo: 1,
          pageSize: 10,
          totalRows: '',
          start: ''
        },
        nickName: '' // 排序字段 为对应列名,
      },
      timeValue: '',
      logDetailshowHide: false,
      logInfo: {
        method: undefined,
        requestParam: undefined,
        returnParam: undefined
      },
      // 添加接收人
      urgentShow: false,
      mobileList: [
        {
          name: '',
          mobile: ''
        }
      ]
    }
  },
  watch: {
    // 时间赋值
    timeValue(val) {
      this.listQuery.startTime = this.timeValue ? this.timeValue[0] : null
      this.listQuery.endTime = this.timeValue ? this.timeValue[1] : null
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    // 紧急联系人 弹框
    setUrgentShow() {
      // this.urgentShow = true
      getAllopatricMobileCode().then(res => {
        console.log(res)
        if (res.data.length > 0) {
          const list = []
          for (let i = 0; i < res.data.length; i++) {
            list.push({
              mobile: res.data[i].mobile,
              name: res.data[i].name
            })
          }
          this.mobileList = list
        }
        this.urgentShow = true
      })
    },
    // 保存
    saveMobileList() {
      const list = this.mobileList.map(item => item.mobile)
      const status = list.every(item => item.trim().length == 11)
      if (!status) {
        this.$message.error('请输入正确的手机格式！')
        return
      }
      console.log(this.mobileList)

      setAllopatricMobileCode({ list: this.mobileList }).then(res => {
        console.log(res)
        this.$message[res.status == 200 ? 'success' : 'error'](res.message)
        if (res.status == 200) {
          this.urgentShow = false
        }
      })
    },
    // 删除
    deleteItem(index) {
      this.mobileList.splice(index, 1)
    },

    // 添加
    addItem() {
      this.mobileList.push({ mobile: '', name: '' })
    },
    loadData() {
      listAdminLoginRecordData(this.listQuery).then(res => {
        const originList = res.data
        this.totalRows = originList.totalRows
        this.tableData = originList.rows
      })
    },
    handleFilter() {
      this.listQuery.pager.pageNo = 1
      this.loadData()
    }
  }
}
</script>
<style lang="scss" scoped>
$menuText:#14162E; // 侧边栏字体颜色
$hoverColor:#1D143C;// 鼠标停留主色调浅色
$mainColor:#3b425d;// 主色调
.filter-container {
  width: 100%;
  height: 48px;
  line-height: 48px;
  .filter-item {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 10px;
  }
  .kInput{
    position:absolute;
    right: 20px;
  }
  .filter-title{
    height: 48px;
    line-height: 48px;
    font-size: 16px;
    font-weight: 500;
    margin-right: 22px;
    color: #14162E;
  }
  .user-item {
    margin-left: 10px;
    margin-right: 20px;
  }
  .room-type,.user-status,.account-status{
    margin-right: 20px;
  }
}
.content{
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 80px 100px;
}
</style>
